<template>
    <div>
        <van-nav-bar title="详情页" left-text="返回" left-arrow @click-left="onClickLeft" :fixed="true" />
        <div class="userInfo">
            <div class="left">
                <div class="avatar" @click="toUserMain">
                    <img :src="user.detailList.avatar" alt="">
                </div>
                <span>{{ user.detailList.nickname }}</span>
            </div>
            <div class="right">
                <van-button v-if="user.detailList.publisher_id != user.userInfo.user_id" type="default" round
                    size="small" @click="knowMore">了解更多</van-button>
                <van-button v-else type="default" round size="small" @click="deletePub">删除</van-button>
            </div>

        </div>
        <div class="swiper" v-if="user.detailList?.imgUrl?.length>0">
            <van-swipe lazy-render style="height: 100%;">
                <van-swipe-item v-for="image in user.detailList.imgUrl" :key="image">
                    <img :src="image" class="img" />
                </van-swipe-item>
            </van-swipe>
        </div>
        <div v-if="type=='pet'">
            <div class="remark">
            名称： {{ user.detailList.name }}
        </div>
        <div class="remark">
            年龄： {{ user.detailList.age }}岁
        </div>
        <div class="remark">
            性别： {{ user.detailList.gender == 'male' ? '公' : '母' }}
        </div>
        <div class="remark">
            描述：{{ user.detailList.remark }}
        </div>
        </div>
        <div v-else>
        <div class="remark title">
             {{ user.detailList.title  }}
        </div>
        <div class="remark">
            {{ user.detailList.content }}
        </div>
        </div>
        <van-divider>没有更多了</van-divider>

        <van-action-sheet :show="state.show" style="min-height: 25rem;" close-on-click-action close-on-click-overlay
            title="评论" @cancel="state.show = false">
            <comment :shareposts_id="id" />
        </van-action-sheet>
        <van-action-bar v-if="type=='pet'">
            <van-action-bar-icon :icon="state.iscollection?'star-o':'star'" :text="state.iscollection?'收藏':'已收藏'" color="#ff5000" @click="collectionPostOrCard"  />
            <van-action-bar-button :type="state.hasapproval ? 'primary' : 'danger'"
                :disabled="!user.userInfo.permissions.approval||!state.isMyPet && state.hasapproval&&state.status!=2"
                :text="state.isMyPet ? '查看申请列表' : state.hasapproval ?state.status==2?'重新申请': '已申请' : '申请领养'" @click="approval(id)" />
        </van-action-bar>
        <van-action-bar v-else>
            <van-action-bar-icon icon="chat-o" text="评论" @click="state.show = true" />
            <van-action-bar-icon style="float: right;" :icon="state.iscollection?'star-o':'star'" :text="user.detailList.collect_count" color="#ff5000" @click="collectionPostOrCard" />
            <van-action-bar-icon icon="star" text="点赞" color="#ff5000" />
        </van-action-bar>
    </div>
</template>

<script setup lang='ts'>
import { userStore } from '@/store';
import { delPublish } from '@/api/index'
import { onMounted } from 'vue';
import { showConfirmDialog } from 'vant';
const user = userStore()
import { useRouter } from 'vue-router';
import { showSuccessToast } from 'vant';
import comment from '@/components/comment.vue';
import { reactive } from 'vue';
import {handleCollection} from '@/api/index'
const router = useRouter()
const id: any = router.currentRoute.value.query.id
const type:any=router.currentRoute.value.query.type
 

const state = reactive({
    show: false,
    hasapproval: false,
    status:0,
    isMyPet: false,
    iscollection:true
})
onMounted(async () => {
    user.getDetail(id,type)
    user.queryCollectionList(type).then(()=>{
        state.iscollection=!user.collectList.some((item:any) => {
        return item.resource_id == id
    })
    })
   

    if (type=='pet') {
        if (user.myApplicationList.length == 0) {
        await user.getMyapprovalList('application')
    }
    let obj = user.myApplicationList.find(item => {
        return item.petId == id
    })||{}
    state.hasapproval=Object.keys(obj).length>0
    state.status=obj?.status||0
    
    state.isMyPet = user.cardList.some(item => {
        return item.card_id == id && item.publisher_id == user.userInfo.user_id
    }) 
    }
})
const knowMore = () => {
    router.push({
        path: '/ChatInterface',
        query: {
            id: type=='pet'?user.detailList.publisher_id:user.detailList.sharer_id
        }
    })
}
const onClickLeft = () => {
    router.back()
}

const toUserMain = () => {
    router.push({
        path: '/userMain',
        query: {
            id: user.detailList.publisher_id
        }
    })
}

const deletePub = () => {
    showConfirmDialog({
        title: '删除',
        message:
            '确定删除吗？',
    })
        .then(async () => {
            await delPublish(user.detailList.card_id).then((res: any) => {
                if (res.code == 200) {
                    showSuccessToast('删除成功')
                    router.back()
                }

            })
        })

}

const approval = (id: any) => {
    
    if (state.isMyPet) {
        router.push({
        path: '/approval/application'
    })
    return
    }

    if (!user.userInfo.realname && !user.userInfo.idNo) {
    showConfirmDialog({
      title: '提示',
      message:
        '您还未进行实名认证，请先点击确定进行实名认证！',
    })
      .then(() => {
        user.setRealShow(true)
      })
      .catch(() => {
        
      });
      return
  }
    
    router.push({
        path: '/applicationForm',
        query: {
            id: id
        }
    })
}

const collectionPostOrCard=()=>{
    handleCollection({
        resource_type:type,
        resource_id:id,
        user_id:user.userInfo.user_id,
        iscollection:state.iscollection
    }).then((res:any)=>{
        if (res?.code==200) {
            state.iscollection=!state.iscollection
        }
    })
}

</script>

<style lang='less' scoped>
.swiper {
    width: 100%;
    height: calc(100vh - 18rem);

    .img {
        width: 100%;
        height: 100%;
    }
}

.remark {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 0.4rem;
    max-height: fit-content;
}
.remark.title{
    font-size: 1.2rem;
    font-weight: 800;
}

.userInfo {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0.5rem;
    margin-top: 2.875rem;

    .left {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }


    .avatar {
        width: 2rem;
        height: 2rem;

        img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
    }
}

.three {
    text-align: center;
}

.btn {
    margin: 1rem auto;
}
</style>
